<!-- 第三页 -->
<template>

  <div>
    <!-- <div id="page-three" class="page-three" :style=" 'height:'+curHeight+'px' ">1</div> -->
    <!-- type="textarea"
    :autosize="{ minRows: 1, maxRows: 4}" -->

    <!--el-collapse v-model="activeNames" style="border: 0;">
      <el-collapse-item style="height: 0; margin-botttom:0;" name="nav"-->
    <!-- 导航栏 -->
    <nav-menu :pageIndex="pageIndex"></nav-menu>
    <!--/el-collapse-item>
  </el-collapse-->
    <div id="page-three" class="page-three">
      <div class="item" style="overflow-y: auto; color: #000; margin-top: 1%; text-align:center">
        <!--p style="font-size: 14px"><div style="font-weight: bold;">Topics:</div> GPT-3, 弱监督学习, AI医疗, 信息检索与推荐</p-->
        <el-row>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-document" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">文章<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.paperCount }}</p>
              </el-col>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-s-custom" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">作者<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.authorCount }}</p>
              </el-col>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-school" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">机构<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">
                  {{ data.institutionCount }}</p>
              </el-col>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-document-copy" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">报纸<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.newspaperCount }}</p>
              </el-col>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-notebook-2" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">期刊<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.periodicalCount }}</p>
              </el-col>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display:flex">
              <i class="el-icon-data-analysis" style="font-size:84px"></i>
              <el-col>
                <p style="font-size: 14px; ">会议<br></p>
                <p style="font-size: 28px; margin-block-start: 0; margin-block-end: 0;">{{ data.conferenceCount }}</p>
              </el-col>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-input placeholder="请输入搜索内容" v-model="input" class="input-with-select" style="width:990px">
            <el-select v-model="select" slot="prepend" placeholder="所有" style="width:200px">
              <!--              <el-option label="所有" value=""></el-option>-->
              <el-option label="文章" value="paper"></el-option>
              <el-option label="作者" value="author"></el-option>
              <!--                <el-option label="机构" value="institution"></el-option>-->
              <!--                <el-option label="报纸" value="newspaper"></el-option>-->
              <!--                <el-option label="期刊" value="periodical"></el-option>-->
              <!--                <el-option label="会议" value="conference"></el-option>-->
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
          </el-input>
          <p/>
          <!--            <div class="chart_graph">-->
          <!--              <chartKnowledge :nodes="nodes" :links="links"></chartKnowledge>-->
          <!--            </div>-->
        </el-row>
        <!--        <el-row >-->
        <el-row>
          <el-divider>实体关系展示</el-divider>
          <div class="chart_graph">
            <chartEntityRelation :nodes="nodes" :links="links" :categories="categories"></chartEntityRelation>
          </div>
        </el-row>
        <el-row>
          <el-divider>本体模型展示</el-divider>
          <div class="chart_onto">
            <chartOntology :nodes="ontoNodes" :links="ontoLinks" :categories="categories"></chartOntology>
          </div>
        </el-row>


        <!--        </el-row>-->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import NavMenu from "@/components/NavMenu.vue"
import chartEntityRelation from "@/components/chartEntityRelation";
import chartOntology from "@/components/chartOntology";

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    chartEntityRelation,
    chartOntology,
    NavMenu
  },
  data() {
    return {
      pageIndex: "1", //当前页的序号
      scrolltop: 0, //滑轮距顶部的距离

      activeNames: ['nav'], //折叠面板显示导航栏nav
      curHeight: "", //窗口高度
      data: {},

      input: '',
      select: 'paper',
      isSearch: false,

      nodes: [],
      links: [],
      ontoshow: false,
      // categories: [
      //   'paper',
      //   'author',
      //   'institution',
      //   'conference',
      //   'newspaper'
      // ],

      ontoNodes: [],
      ontoLinks: [],
      categories: [{
        name: 'paper'
      }, {
        name: 'keywords'
      },
        {
          name: 'institution'
        }, {
          name: 'technology'
        }, {
          name: 'user'
        }, {
          name: 'author'
        }, {
          name: 'from_name'
        }, {
          name: 'newspaper'
        }, {
          name: 'periodical'
        }, {
          name: 'conference'
        }]
    };
  },
  mounted() {
    this.loadAll();
  },
  methods: {
    loadAll() {
      Vue.prototype.post('http://192.168.0.94:2226/show_kbpage', {}, this.getIndexDataSucc)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.curPage = val;
      this.onSearch();
    },
    getIndexDataSucc(response) {
      // if (response.data.error_code === 0) {
      //   this.data = response.data.data;
      //   this.isLoading = false;
      // } else {
      //   alert(Vue.$t('error.getResponse'))
      // }
      this.data = response.data; ///
      this.ontoNodes = this.data.ontology.nodes_data
      this.ontoLinks = this.data.ontology.links_data

    },
    onSearch() {
      let msg = {type: this.select, query: this.input}
      Vue.prototype.post('http://192.168.0.94:2226/search_graph', JSON.stringify(msg), this.searchDataSucc)

    },
    searchDataSucc(response) {
      console.log(response)
      this.nodes = response.data.nodes_data
      this.links = response.data.links_data
      console.log('Knowledge Page Nodes:', this.nodes)
      console.log('Knowledge Page Links:', this.links)
    }
  }
};
</script>

<style lang='scss' scoped>
.page-three {
  font-size: 36px;
  color: #fff;
  padding: 5%;
  box-sizing: border-box;
  padding-top: 50px;
  display: block;
}

p {
  color: #000;
  font-size: 18px;
  text-align: left;
}

.item {
  float: left;
  width: 100%;
  margin-bottom: 18px;
}

.suggest {
  color: #000;
  font-size: 36px;
  float: right;
  width: 22%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin: 10px;
}


.title {
  font-size: 16px;
  float: left;
  text-align: left;
}

.content {
  font-size: 13px;
  color: #000;
}

.id {
  font-size: 13px;
  color: #171;
}

.box-card {
  margin-top: 8px;
  filter: Alpha(opacity=80);
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.chart_graph {
  border: 1px solid #ededed;
  //width: calc((100% - 30px) * 0.95);
  width: calc((100% - 0px));
  height: 800px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_graph:nth-child(3n) {
  margin-right: 0;
}

.chart_onto {
  border: 1px solid #ededed;
  //width: calc((100% - 30px) * 0.95);
  width: calc((100% - 0px));
  height: 800px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_onto:nth-child(3n) {
  margin-right: 0;
}
</style>
